<template>
  <a-scene
    vr-mode-ui="enabled: false"
    embedded
    arjs="sourceType: webcam; debugUIEnabled: false;"
  >
    <!-- <a-assets>
      <img id="advertisement" src="../public/favicon.ico" />
    </a-assets> -->
    <template v-for="item in list" :key="item.id">
      <a-assets>
        <img
          :id="`advertisement${item.id}`"
          :src="item.url"
          crossorigin="anonymous"
        />
      </a-assets>
    </template>

    <!-- <a-plane
      src="#advertisement"
      scale="120 120 120"
      gps-entity-place="latitude: 41.890339; longitude: 12.492586;"
    ></a-plane> -->

    <template v-for="item in list" :key="item.id">
      <a-plane
        :src="`#advertisement${item.id}`"
        scale="120 120 120"
        :gps-entity-place="`latitude: ${item.lat}; longitude:  ${item.lng};`"
      ></a-plane>
    </template>

    <a-camera gps-camera rotation-reader> </a-camera>
  </a-scene>
</template>
<script lang="ts">
import { usePickStore } from '@/store';
import { Image } from '@/store/pick/types';
import { gcoordBD09ToWGS84 } from '@/unit/gcoord';
import { computed, defineComponent } from 'vue';
export default defineComponent({
  components: {},
  setup() {
    const pickStore = usePickStore();
    pickStore.getAllImage();

    const list = computed(() => {
      const result: Image[] = [];
      pickStore.list.map((image) => {
        const gcoord = gcoordBD09ToWGS84(image.lng, image.lat);
        const vo: Image = {
          lng: gcoord[0],
          lat: gcoord[1],
          url: image.url,
          id: image.id,
          userId: image.userId,
        };

        result.push(vo);
      });
      console.log('result', result);
      return result;
    });
    return { list };
  },
});
</script>
<style lang="less" scoped></style>
